<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>添加作业</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="css/teacher_homework_item.css">
	<link rel="stylesheet" href="../css/main.css">

	<style>
		.del {
			position: absolute;
			right: 1px;
			top: 1px;
			z-index: 99;
		}

		.checks {
			width: 90%;
			height: 50px;
			margin-left: 5%;
			margin-top: 2%;
			font-size: 20px;
			padding-top: 10px;
			padding-left: 2%;
			border-bottom: solid 1px silver;
		}

		.classes {
			width: 75%;
		}

		#text {
			width: calc(89.5% - 4em);
			min-height: 200px;
			height: auto;
			font-size: 16px;
			-webkit-appearance: none;
			outline: none;
			background: white;
			color: #333;
			margin-top: 20px;
			margin-left: calc(2em + 10%);
			margin-bottom: 20px;
		}

		.File {
			margin-left: calc(2em + 10%);
		}

		.offer {
			background: #40b9e3;
			width: calc(90% - 4em);
			height: 40px;
			margin-left: 13%;
			margin-top: 10px;
			text-align: center;
			font-size: 16px;
			color: #fff;
			line-height: 30px;
			letter-spacing: 10px;
			margin-bottom: 30px;
			border-radius: 5px;
			margin-left: calc(2em + 10%);
		}
	</style>

</head>

<body>
	<div id="vue-root" style="height: 100%">
		<div class="header">
			<div class="header_title">添加作业</div>
			<a onclick="history.back()">
				<img src="../image/return.png" alt="" class="return">
			</a>
		</div>
		<div style="height: 40px;"></div>
		<!-- <div class="region">
			<div class="region_name">课程:</div>
			<div class="region_subjects">
				<select class="subjects" v-model="item.courseId">
					<option :value="undefined" disabled="disabled">请选择课程</option>
					<option v-for="course in courses" v-text="course.name" :key="course.id" :value="course.id"></option>
				</select>
			</div>
		</div> -->

		<div class="region">
			<div class="region_name">科目：</div>
			<div class="region_title">
				<input class="title" style="width: auto;" placeholder="科目名称" v-model="item.courseName" />
			</div>
		</div>

		<div class="region">
			<div class="region_name">班级:</div>
			<div class="region_classes">
				<select class="subjects" multiple="multiple" v-model="item.classesIds">
					<option v-for="classes in classess" v-text="classes.name" :key="classes.id" :value="classes.id">
					</option>
				</select>
			</div>
		</div>

		<div class="region">
			<div class="region_name">标题:</div>
			<div class="region_title">
				<input class="title" placeholder="请填写作业题目" v-model="item.title" />
			</div>
		</div>

		<div>
			<textarea id="text" placeholder="请输入具体内容" v-model="item.content"></textarea>
		</div>


		<div class="img_box" style="position: relative;" v-for="(pic,index) in pics" :key="index">
			<img :src="getImg(pic)" class="imgs" />
			<img src="/image/del.svg" class="del" @click="del(index)" />
		</div>


		<form id="form" method="post" ref="form" enctype="multipart/form-data" style="display: none">
			<input type="file" id="file" name="file" ref="file" accept="image/*" @change="upload">
		</form>
		<div class="File">
			<label @click="choose">
				<img src="../image/picture.png">
			</label>
		</div>
		<div class="offer" @click="submit">提交</div>

	</div>

	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/js/common.js"></script>


	<script src="/wechat/js/wx.js"></script>

	<script>
		var teacher = getTeacher();
		var app = new Vue({
			el: '#vue-root',
			data: {
				courses: [],
				classess: [],
				item: {
					courseId: null,
					classesIds: []
				},
				pics: [],
				courseMap: {}
			},
			created: function () {
				axios.get('/t/courses').then(function (res) {
					this.courses = res.data;
					this.item.courseId = this.courses.length ? this.courses[0].id : 1;
					this.courses.forEach(function (it) {
						this.courseMap[it.id] = it.name;
					}.bind(this));
				}.bind(this));
				axios.get('/t/classes').then(function (res) {
					this.classess = res.data;
				}.bind(this));
			},
			methods: {
				getImg: function (pic) {
					return '/static/' + teacher.schoolId + '/homework/' + pic;
				},
				submit: function () {
					if (!this.item.courseId) {
						alert('请选择课程');
						return;
					}

					if (this.item.classesIds.length == 0) {
						alert('请选择班级');
						return;
					}

					this.item.pics = this.pics.join('|');
					axios.post('/t/homework', this.item).then(function (res) {
						alert('提交成功');
						history.back();
					});
				},
				upload: function () {
					axios.post('/t/upload/homework?schoolId=' + teacher.schoolId,
						new FormData(this.$refs.form)).then(function (res) {
							this.pics.push(res.data.data);
						}.bind(this));
				},
				del: function (index) {
					if (confirm('确定删除该图片？'))
						this.pics.splice(index, 1);
				},
				choose: function () {
					if (wxReady) {
						wxChooseImg(3, 'homework', function (pic) {
							this.pics.push(pic);
						}.bind(this));
					} else {
						this.$refs.file.click();
					}
				}
			},
			/* watch: {
				'item.courseId': function (newValue, oldValue) {
					if (newValue)
						axios.get('/t/classes/' + newValue).then(function (res) {
							this.classess = res.data;
							this.item.classesIds = [];
							//this.item.courseName = this.courseMap[newValue];
						}.bind(this));
				}
			} */
		});
	</script>


</body>

</html>